
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>ASP.NET 4 · TypeScript Handbook</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="Patrick Zhong">
        
        
    
    <link rel="stylesheet" href="../../../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../../../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../../../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../../../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../../../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../../../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Gulp.html" />
    
    
    <link rel="prev" href="ASP.NET Core.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../../../">
            
                <a href="../../../">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="./">
            
                <a href="./">
            
                    
                    快速上手
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="TypeScript in 5 minutes.html">
            
                <a href="TypeScript in 5 minutes.html">
            
                    
                    5分钟了解TypeScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="ASP.NET Core.html">
            
                <a href="ASP.NET Core.html">
            
                    
                    ASP.NET Core
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.2.3" data-path="ASP.NET 4.html">
            
                <a href="ASP.NET 4.html">
            
                    
                    ASP.NET 4
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Gulp.html">
            
                <a href="Gulp.html">
            
                    
                    Gulp
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.5" data-path="Knockout.html">
            
                <a href="Knockout.html">
            
                    
                    Knockout.js
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.6" data-path="React & Webpack.html">
            
                <a href="React & Webpack.html">
            
                    
                    React与webpack
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.7" data-path="React.html">
            
                <a href="React.html">
            
                    
                    React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.8" data-path="Angular 2.html">
            
                <a href="Angular 2.html">
            
                    
                    Angular 2
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.9" data-path="Migrating from JavaScript.html">
            
                <a href="Migrating from JavaScript.html">
            
                    
                    从JavaScript迁移到TypeScript
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../">
            
                <a href="../">
            
                    
                    手册
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="../Basic Types.html">
            
                <a href="../Basic Types.html">
            
                    
                    基础类型
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="../Variable Declarations.html">
            
                <a href="../Variable Declarations.html">
            
                    
                    变量声明
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="../Interfaces.html">
            
                <a href="../Interfaces.html">
            
                    
                    接口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.4" data-path="../Classes.html">
            
                <a href="../Classes.html">
            
                    
                    类
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.5" data-path="../Functions.html">
            
                <a href="../Functions.html">
            
                    
                    函数
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.6" data-path="../Generics.html">
            
                <a href="../Generics.html">
            
                    
                    泛型
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.7" data-path="../Enums.html">
            
                <a href="../Enums.html">
            
                    
                    枚举
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.8" data-path="../Type Inference.html">
            
                <a href="../Type Inference.html">
            
                    
                    类型推论
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.9" data-path="../Type Compatibility.html">
            
                <a href="../Type Compatibility.html">
            
                    
                    类型兼容性
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.10" data-path="../Advanced Types.html">
            
                <a href="../Advanced Types.html">
            
                    
                    高级类型
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.11" data-path="../Utilit Types.md">
            
                <span>
            
                    
                    实用工具类型
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.12" data-path="../Symbols.html">
            
                <a href="../Symbols.html">
            
                    
                    Symbols
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.13" data-path="../Iterators and Generators.html">
            
                <a href="../Iterators and Generators.html">
            
                    
                    Iterators 和 Generators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.14" data-path="../Modules.html">
            
                <a href="../Modules.html">
            
                    
                    模块
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.15" data-path="../Namespaces.html">
            
                <a href="../Namespaces.html">
            
                    
                    命名空间
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.16" data-path="../Namespaces and Modules.html">
            
                <a href="../Namespaces and Modules.html">
            
                    
                    命名空间和模块
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.17" data-path="../Module Resolution.html">
            
                <a href="../Module Resolution.html">
            
                    
                    模块解析
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.18" data-path="../Declaration Merging.html">
            
                <a href="../Declaration Merging.html">
            
                    
                    声明合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.19" data-path="../Writing Definition Files.html">
            
                <a href="../Writing Definition Files.html">
            
                    
                    书写.d.ts文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.20" data-path="../JSX.html">
            
                <a href="../JSX.html">
            
                    
                    JSX
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.21" data-path="../Decorators.html">
            
                <a href="../Decorators.html">
            
                    
                    Decorators
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.22" data-path="../Mixins.html">
            
                <a href="../Mixins.html">
            
                    
                    混入
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.23" data-path="../Triple-Slash Directives.html">
            
                <a href="../Triple-Slash Directives.html">
            
                    
                    三斜线指令
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.24" data-path="../Type Checking JavaScript Files.html">
            
                <a href="../Type Checking JavaScript Files.html">
            
                    
                    JavaScript文件里的类型检查
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../declaration files/Introduction.html">
            
                <a href="../declaration files/Introduction.html">
            
                    
                    如何书写声明文件
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="../declaration files/Library Structures.html">
            
                <a href="../declaration files/Library Structures.html">
            
                    
                    结构
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="../declaration files/Do's and Don'ts.html">
            
                <a href="../declaration files/Do's and Don'ts.html">
            
                    
                    规范
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="../declaration files/By Example.html">
            
                <a href="../declaration files/By Example.html">
            
                    
                    举例
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="../declaration files/Deep Dive.html">
            
                <a href="../declaration files/Deep Dive.html">
            
                    
                    深入
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="../declaration files/Publishing.html">
            
                <a href="../declaration files/Publishing.html">
            
                    
                    发布
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.6" data-path="../declaration files/Consumption.html">
            
                <a href="../declaration files/Consumption.html">
            
                    
                    使用
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../tsconfig.json.html">
            
                <a href="../tsconfig.json.html">
            
                    
                    工程配置
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="../tsconfig.json.html">
            
                <a href="../tsconfig.json.html">
            
                    
                    tsconfig.json
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="../Project References.html">
            
                <a href="../Project References.html">
            
                    
                    工程引用
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="../Typings for NPM Packages.html">
            
                <a href="../Typings for NPM Packages.html">
            
                    
                    NPM包的类型
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="../Compiler Options.html">
            
                <a href="../Compiler Options.html">
            
                    
                    编译选项
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.5" data-path="../Configuring Watch.html">
            
                <a href="../Configuring Watch.html">
            
                    
                    配置 Watch
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="../Compiler Options in MSBuild.html">
            
                <a href="../Compiler Options in MSBuild.html">
            
                    
                    在MSBuild里使用编译选项
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.7" data-path="../Integrating with Build Tools.html">
            
                <a href="../Integrating with Build Tools.html">
            
                    
                    与其它构建工具整合
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.8" data-path="../Nightly Builds.html">
            
                <a href="../Nightly Builds.html">
            
                    
                    使用TypeScript的每日构建版本
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="../../wiki/">
            
                <a href="../../wiki/">
            
                    
                    Wiki
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="../../wiki/this-in-TypeScript.html">
            
                <a href="../../wiki/this-in-TypeScript.html">
            
                    
                    TypeScript里的this
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="../../wiki/coding_guidelines.html">
            
                <a href="../../wiki/coding_guidelines.html">
            
                    
                    编码规范
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="../../wiki/Common Errors.html">
            
                <a href="../../wiki/Common Errors.html">
            
                    
                    常见编译错误
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="../../wiki/TypeScript-Editor-Support.html">
            
                <a href="../../wiki/TypeScript-Editor-Support.html">
            
                    
                    支持TypeScript的编辑器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="../../wiki/Using-TypeScript-With-ASP.NET-5.html">
            
                <a href="../../wiki/Using-TypeScript-With-ASP.NET-5.html">
            
                    
                    结合ASP.NET v5使用TypeScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="../../wiki/Architectural-Overview.html">
            
                <a href="../../wiki/Architectural-Overview.html">
            
                    
                    架构概述
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="../../wiki/Roadmap.html">
            
                <a href="../../wiki/Roadmap.html">
            
                    
                    发展路线图
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../../release-notes/">
            
                <a href="../../release-notes/">
            
                    
                    新增功能
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.7.1" data-path="../../release-notes/TypeScript 3.1.html">
            
                <a href="../../release-notes/TypeScript 3.1.html">
            
                    
                    TypeScript 3.1
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.2" data-path="../../release-notes/TypeScript 3.0.html">
            
                <a href="../../release-notes/TypeScript 3.0.html">
            
                    
                    TypeScript 3.0
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.3" data-path="../../release-notes/TypeScript 2.9.html">
            
                <a href="../../release-notes/TypeScript 2.9.html">
            
                    
                    TypeScript 2.9
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.4" data-path="../../release-notes/TypeScript 2.8.html">
            
                <a href="../../release-notes/TypeScript 2.8.html">
            
                    
                    TypeScript 2.8
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.5" data-path="../../release-notes/TypeScript 2.7.html">
            
                <a href="../../release-notes/TypeScript 2.7.html">
            
                    
                    TypeScript 2.7
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.6" data-path="../../release-notes/TypeScript 2.6.html">
            
                <a href="../../release-notes/TypeScript 2.6.html">
            
                    
                    TypeScript 2.6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.7" data-path="../../release-notes/TypeScript 2.5.html">
            
                <a href="../../release-notes/TypeScript 2.5.html">
            
                    
                    TypeScript 2.5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.8" data-path="../../release-notes/TypeScript 2.4.html">
            
                <a href="../../release-notes/TypeScript 2.4.html">
            
                    
                    TypeScript 2.4
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.9" data-path="../../release-notes/TypeScript 2.3.html">
            
                <a href="../../release-notes/TypeScript 2.3.html">
            
                    
                    TypeScript 2.3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.10" data-path="../../release-notes/TypeScript 2.2.html">
            
                <a href="../../release-notes/TypeScript 2.2.html">
            
                    
                    TypeScript 2.2
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.11" data-path="../../release-notes/TypeScript 2.1.html">
            
                <a href="../../release-notes/TypeScript 2.1.html">
            
                    
                    TypeScript 2.1
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.12" data-path="../../release-notes/TypeScript 2.0.html">
            
                <a href="../../release-notes/TypeScript 2.0.html">
            
                    
                    TypeScript 2.0
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.13" data-path="../../release-notes/TypeScript 1.8.html">
            
                <a href="../../release-notes/TypeScript 1.8.html">
            
                    
                    TypeScript 1.8
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.14" data-path="../../release-notes/TypeScript 1.7.html">
            
                <a href="../../release-notes/TypeScript 1.7.html">
            
                    
                    TypeScript 1.7
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.15" data-path="../../release-notes/TypeScript 1.6.html">
            
                <a href="../../release-notes/TypeScript 1.6.html">
            
                    
                    TypeScript 1.6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.16" data-path="../../release-notes/TypeScript 1.5.html">
            
                <a href="../../release-notes/TypeScript 1.5.html">
            
                    
                    TypeScript 1.5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.17" data-path="../../release-notes/TypeScript 1.4.html">
            
                <a href="../../release-notes/TypeScript 1.4.html">
            
                    
                    TypeScript 1.4
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.18" data-path="../../release-notes/TypeScript 1.3.html">
            
                <a href="../../release-notes/TypeScript 1.3.html">
            
                    
                    TypeScript 1.3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7.19" data-path="../../release-notes/TypeScript 1.1.html">
            
                <a href="../../release-notes/TypeScript 1.1.html">
            
                    
                    TypeScript 1.1
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../../breaking-changes/breaking-changes.html">
            
                <a href="../../breaking-changes/breaking-changes.html">
            
                    
                    Breaking Changes
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.8.1" data-path="../../breaking-changes/TypeScript 2.4.html">
            
                <a href="../../breaking-changes/TypeScript 2.4.html">
            
                    
                    TypeScript 2.4
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.2" data-path="../../breaking-changes/TypeScript 2.3.html">
            
                <a href="../../breaking-changes/TypeScript 2.3.html">
            
                    
                    TypeScript 2.3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.3" data-path="../../breaking-changes/TypeScript 2.2.html">
            
                <a href="../../breaking-changes/TypeScript 2.2.html">
            
                    
                    TypeScript 2.2
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.4" data-path="../../breaking-changes/TypeScript 2.1.html">
            
                <a href="../../breaking-changes/TypeScript 2.1.html">
            
                    
                    TypeScript 2.1
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.5" data-path="../../breaking-changes/TypeScript 2.0.html">
            
                <a href="../../breaking-changes/TypeScript 2.0.html">
            
                    
                    TypeScript 2.0
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.6" data-path="../../breaking-changes/TypeScript 1.8.html">
            
                <a href="../../breaking-changes/TypeScript 1.8.html">
            
                    
                    TypeScript 1.8
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.7" data-path="../../breaking-changes/TypeScript 1.7.html">
            
                <a href="../../breaking-changes/TypeScript 1.7.html">
            
                    
                    TypeScript 1.7
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.8" data-path="../../breaking-changes/TypeScript 1.6.html">
            
                <a href="../../breaking-changes/TypeScript 1.6.html">
            
                    
                    TypeScript 1.6
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.9" data-path="../../breaking-changes/TypeScript 1.5.html">
            
                <a href="../../breaking-changes/TypeScript 1.5.html">
            
                    
                    TypeScript 1.5
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8.10" data-path="../../breaking-changes/TypeScript 1.4.html">
            
                <a href="../../breaking-changes/TypeScript 1.4.html">
            
                    
                    TypeScript 1.4
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../../.." >ASP.NET 4</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="aspnet-4">ASP.NET 4</h1>
<blockquote>
<p>&#x6CE8;&#x610F;&#xFF1A; &#x6B64;&#x6559;&#x7A0B;&#x5DF2;&#x4ECE;&#x5B98;&#x65B9;&#x5220;&#x9664;</p>
</blockquote>
<h2 id="&#x5B89;&#x88C5;-typescript">&#x5B89;&#x88C5; TypeScript</h2>
<p>&#x5982;&#x679C;&#x4F60;&#x4F7F;&#x7528;&#x7684; Visual Studio &#x7248;&#x672C;&#x8FD8;&#x4E0D;&#x652F;&#x6301; TypeScript&#xFF0C; &#x4F60;&#x53EF;&#x4EE5;&#x5B89;&#x88C5; <a href="http://www.microsoft.com/en-us/download/details.aspx?id=48593" target="_blank">Visual Studio 2015</a> &#x6216;&#x8005; <a href="https://www.microsoft.com/en-us/download/details.aspx?id=48739" target="_blank">Visual Studio 2013</a>&#x3002;
&#x8FD9;&#x4E2A;&#x5FEB;&#x901F;&#x4E0A;&#x624B;&#x6307;&#x5357;&#x4F7F;&#x7528;&#x7684;&#x662F; Visual Studio 2015&#x3002;</p>
<h2 id="&#x65B0;&#x5EFA;&#x9879;&#x76EE;">&#x65B0;&#x5EFA;&#x9879;&#x76EE;</h2>
<ol>
<li>&#x9009;&#x62E9; <strong>File</strong></li>
<li>&#x9009;&#x62E9; <strong>New Project</strong></li>
<li>&#x9009;&#x62E9; <strong>Visual C#</strong></li>
<li><p>&#x9009;&#x62E9; <strong>ASP.NET Web Application</strong></p>
<p><img src="../../assets/images/tutorials/aspnet/new-asp-project.png" alt="Create new ASP.NET project"></p>
</li>
<li><p>&#x9009;&#x62E9; <strong>MVC</strong></p>
<p> &#x53D6;&#x6D88;&#x590D;&#x9009; &quot;Host in the cloud&quot; &#x672C;&#x6307;&#x5357;&#x5C06;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x672C;&#x5730;&#x793A;&#x4F8B;&#x3002;
 <img src="../../assets/images/tutorials/aspnet/new-asp-project-template.png" alt="Use MVC template"></p>
</li>
</ol>
<p>&#x8FD0;&#x884C;&#x6B64;&#x5E94;&#x7528;&#x4EE5;&#x786E;&#x4FDD;&#x5B83;&#x80FD;&#x6B63;&#x5E38;&#x5DE5;&#x4F5C;&#x3002;</p>
<h1 id="&#x6DFB;&#x52A0;-typescript">&#x6DFB;&#x52A0; TypeScript</h1>
<p>&#x4E0B;&#x4E00;&#x6B65;&#x6211;&#x4EEC;&#x4E3A; TypeScript &#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x5939;&#x3002;</p>
<p><img src="../../assets/images/tutorials/aspnet/new-folder.png" alt="Create new folder"></p>
<p>&#x5C06;&#x6587;&#x4EF6;&#x5939;&#x547D;&#x540D;&#x4E3A; src&#x3002;</p>
<p><img src="../../assets/images/tutorials/aspnet/src-folder.png" alt="src folder"></p>
<h2 id="&#x6DFB;&#x52A0;-typescript-&#x4EE3;&#x7801;">&#x6DFB;&#x52A0; TypeScript &#x4EE3;&#x7801;</h2>
<p>&#x5728; <code>src</code> &#x4E0A;&#x53F3;&#x51FB;&#x5E76;&#x9009;&#x62E9; <strong>New Item</strong>&#x3002;
&#x63A5;&#x7740;&#x9009;&#x62E9; <strong>TypeScript File</strong> &#x5E76;&#x5C06;&#x6B64;&#x6587;&#x4EF6;&#x547D;&#x540D;&#x4E3A; <code>app.ts</code>&#x3002;</p>
<p><img src="../../assets/images/tutorials/aspnet/new-item.png" alt="New item"></p>
<h2 id="&#x6DFB;&#x52A0;&#x793A;&#x4F8B;&#x4EE3;&#x7801;">&#x6DFB;&#x52A0;&#x793A;&#x4F8B;&#x4EE3;&#x7801;</h2>
<p>&#x5C06;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#x5199;&#x5165; <code>app.ts</code> &#x6587;&#x4EF6;&#x3002;</p>
<pre><code class="lang-ts"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">sayHello</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">const</span> compiler = (<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;compiler&quot;</span>) as HTMLInputElement).value;
    <span class="hljs-keyword">const</span> framework = (<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;framework&quot;</span>) as HTMLInputElement).value;
    <span class="hljs-keyword">return</span> <span class="hljs-string">`Hello from <span class="hljs-subst">${compiler}</span> and <span class="hljs-subst">${framework}</span>!`</span>;
}
</code></pre>
<h2 id="&#x6784;&#x5EFA;&#x8BBE;&#x7F6E;">&#x6784;&#x5EFA;&#x8BBE;&#x7F6E;</h2>
<p>&#x53F3;&#x51FB;&#x9879;&#x76EE;&#x5E76;&#x9009;&#x62E9; <strong>New Item</strong>&#x3002;
&#x63A5;&#x7740;&#x9009;&#x62E9; <strong>TypeScript Configuration File</strong> &#x4FDD;&#x6301;&#x6587;&#x4EF6;&#x7684;&#x9ED8;&#x8BA4;&#x540D;&#x5B57;&#x4E3A; <code>tsconfig.json</code>&#x3002;</p>
<p><img src="../../assets/images/tutorials/aspnet/new-tsconfig.png" alt="Create tsconfig.json"></p>
<p>&#x5C06;&#x9ED8;&#x8BA4;&#x7684; <code>tsconfig.json</code> &#x5185;&#x5BB9;&#x6539;&#x4E3A;&#x5982;&#x4E0B;&#x6240;&#x793A;&#xFF1A;</p>
<pre><code class="lang-json">{
  <span class="hljs-string">&quot;compilerOptions&quot;</span>: {
    <span class="hljs-string">&quot;noImplicitAny&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;noEmitOnError&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;sourceMap&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;target&quot;</span>: <span class="hljs-string">&quot;es5&quot;</span>,
    <span class="hljs-string">&quot;outDir&quot;</span>: <span class="hljs-string">&quot;./Scripts/App&quot;</span>
  },
  <span class="hljs-string">&quot;files&quot;</span>: [
    <span class="hljs-string">&quot;./src/app.ts&quot;</span>,
  ],
  <span class="hljs-string">&quot;compileOnSave&quot;</span>: <span class="hljs-literal">true</span>
}
</code></pre>
<p>&#x770B;&#x8D77;&#x6765;&#x548C;&#x9ED8;&#x8BA4;&#x7684;&#x8BBE;&#x7F6E;&#x5DEE;&#x4E0D;&#x591A;&#xFF0C;&#x4F46;&#x6CE8;&#x610F;&#x4EE5;&#x4E0B;&#x4E0D;&#x540C;&#x4E4B;&#x5904;&#xFF1A;</p>
<ol>
<li>&#x8BBE;&#x7F6E; <code>&quot;noImplicitAny&quot;: true</code>&#x3002;</li>
<li>&#x7279;&#x522B;&#x662F;&#x8FD9;&#x91CC; <code>&quot;outDir&quot;: &quot;./Scripts/App&quot;</code>&#x3002;</li>
<li>&#x663E;&#x5F0F;&#x5217;&#x51FA;&#x4E86; <code>&quot;files&quot;</code> &#x800C;&#x4E0D;&#x662F;&#x4F9D;&#x636E; <code>&quot;excludes&quot;</code>&#x9009;&#x9879;&#x3002;</li>
<li>&#x8BBE;&#x7F6E; <code>&quot;compileOnSave&quot;: true</code>&#x3002;</li>
</ol>
<p>&#x5F53;&#x4F60;&#x5199;&#x65B0;&#x4EE3;&#x7801;&#x65F6;&#xFF0C;&#x8BBE;&#x7F6E; <code>&quot;noImplicitAny&quot;</code> &#x9009;&#x9879;&#x662F;&#x4E2A;&#x597D;&#x4E3B;&#x610F; &#x2014; &#x8FD9;&#x53EF;&#x4EE5;&#x786E;&#x4FDD;&#x4F60;&#x4E0D;&#x4F1A;&#x9519;&#x5199;&#x4EFB;&#x4F55;&#x65B0;&#x7684;&#x7C7B;&#x578B;&#x3002;
&#x8BBE;&#x7F6E; <code>&quot;compileOnSave&quot;</code> &#x9009;&#x9879;&#x53EF;&#x4EE5;&#x786E;&#x4FDD;&#x4F60;&#x5728;&#x8FD0;&#x884C;web&#x7A0B;&#x5E8F;&#x524D;&#x81EA;&#x52A8;&#x7F16;&#x8BD1;&#x4FDD;&#x5B58;&#x53D8;&#x66F4;&#x540E;&#x7684;&#x4EE3;&#x7801;&#x3002;
&#x66F4;&#x591A;&#x4FE1;&#x606F;&#x8BF7;&#x53C2;&#x89C1; <a href="../tsconfig.json.html">the tsconfig.json documentation</a>&#x3002;</p>
<h2 id="&#x5728;&#x89C6;&#x56FE;&#x4E2D;&#x8C03;&#x7528;&#x811A;&#x672C;">&#x5728;&#x89C6;&#x56FE;&#x4E2D;&#x8C03;&#x7528;&#x811A;&#x672C;</h2>
<ol>
<li><p>&#x5728; <strong>Solution Explorer</strong> &#x4E2D;, &#x6253;&#x5F00; <strong>Views</strong> | <strong>Home</strong> | <code>Index.cshtml</code>&#x3002;</p>
<p><img src="../../assets/images/tutorials/aspnet/open-index.png" alt="Open Index.cshtml"></p>
</li>
<li><p>&#x4FEE;&#x6539;&#x4EE3;&#x7801;&#x5982;&#x4E0B;&#xFF1A;</p>
<pre><code class="lang-html">@{
    ViewBag.Title = &quot;Home Page&quot;;
}
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;~/Scripts/App/app.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;message&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    Compiler: <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;compiler&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;TypeScript&quot;</span> <span class="hljs-attr">onkeyup</span>=<span class="hljs-string">&quot;document.getElementById(&apos;message&apos;).innerText = sayHello()&quot;</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
    Framework: <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;framework&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;ASP.NET&quot;</span> <span class="hljs-attr">onkeyup</span>=<span class="hljs-string">&quot;document.getElementById(&apos;message&apos;).innerText = sayHello()&quot;</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</code></pre>
</li>
</ol>
<h2 id="&#x6D4B;&#x8BD5;">&#x6D4B;&#x8BD5;</h2>
<ol>
<li>&#x8FD0;&#x884C;&#x9879;&#x76EE;&#x3002;</li>
<li>&#x5728;&#x8F93;&#x5165;&#x6846;&#x4E2D;&#x952E;&#x5165;&#x65F6;&#xFF0C;&#x60A8;&#x5E94;&#x8BE5;&#x770B;&#x5230;&#x4E00;&#x4E2A;&#x6D88;&#x606F;&#xFF1A;</li>
</ol>
<p><img src="../../assets/images/tutorials/aspnet/running-demo.png" alt="Picture of running demo"></p>
<h2 id="&#x8C03;&#x8BD5;">&#x8C03;&#x8BD5;</h2>
<ol>
<li>&#x5728; Edge &#x6D4F;&#x89C8;&#x5668;&#x4E2D;, &#x6309; F12 &#x952E;&#x5E76;&#x9009;&#x62E9; <strong>Debugger</strong> &#x6807;&#x7B7E;&#x9875;&#x3002;</li>
<li>&#x5C55;&#x5F00; localhost &#x5217;&#x8868;, &#x9009;&#x62E9; src/app.ts</li>
<li>&#x5728; <code>return</code> &#x90A3;&#x4E00;&#x884C;&#x4E0A;&#x6253;&#x4E00;&#x4E2A;&#x65AD;&#x70B9;&#x3002;</li>
<li>&#x5728;&#x8F93;&#x5165;&#x6846;&#x4E2D;&#x952E;&#x5165;&#x4E00;&#x4E9B;&#x5185;&#x5BB9;&#xFF0C;&#x786E;&#x8BA4;TypeScript&#x4EE3;&#x7801;&#x547D;&#x4E2D;&#x65AD;&#x70B9;&#xFF0C;&#x89C2;&#x5BDF;&#x5B83;&#x662F;&#x5426;&#x80FD;&#x6B63;&#x786E;&#x5730;&#x5DE5;&#x4F5C;&#x3002;</li>
</ol>
<p><img src="../../assets/images/tutorials/aspnet/paused-demo.png" alt="Demo paused on breakpoint"></p>
<p>&#x8FD9;&#x5C31;&#x662F;&#x4F60;&#x9700;&#x8981;&#x77E5;&#x9053;&#x7684;&#x5728;ASP.NET&#x4E2D;&#x4F7F;&#x7528;TypeScript&#x7684;&#x57FA;&#x672C;&#x77E5;&#x8BC6;&#x4E86;&#x3002;&#x63A5;&#x4E0B;&#x6765;&#xFF0C;&#x6211;&#x4EEC;&#x5F15;&#x5165;Angular&#xFF0C;&#x5199;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;Angular&#x7A0B;&#x5E8F;&#x793A;&#x4F8B;&#x3002;</p>
<h1 id="&#x6DFB;&#x52A0;-angular-2">&#x6DFB;&#x52A0; Angular 2</h1>
<h2 id="&#x4F7F;&#x7528;-npm-&#x4E0B;&#x8F7D;&#x6240;&#x9700;&#x7684;&#x5305;">&#x4F7F;&#x7528; NPM &#x4E0B;&#x8F7D;&#x6240;&#x9700;&#x7684;&#x5305;</h2>
<ol>
<li><p>&#x5B89;&#x88C5; <a href="https://github.com/madskristensen/PackageInstaller" target="_blank">PackageInstaller</a>&#x3002;</p>
</li>
<li><p>&#x7528; PackageInstaller &#x6765;&#x5B89;&#x88C5; Angular 2&#xFF0C; systemjs &#x548C; Typings&#x3002;</p>
<p>&#x5728;project&#x4E0A;&#x53F3;&#x51FB;, &#x9009;&#x62E9; <strong>Quick Install Package</strong>&#x3002;</p>
<p><img src="../../assets/images/tutorials/aspnet/packageinstaller-angular2.png" alt="Use PackageInstaller to install angular2">
<img src="../../assets/images/tutorials/aspnet/packageinstaller-systemjs.png" alt="Use PackageInstaller to install systemjs">
<img src="../../assets/images/tutorials/aspnet/packageinstaller-typings.png" alt="Use PackageInstaller to install Typings"></p>
</li>
<li><p>&#x7528; PackageInstaller &#x5B89;&#x88C5; es6-shim &#x7684;&#x7C7B;&#x578B;&#x6587;&#x4EF6;&#x3002;</p>
<p>Angular 2 &#x5305;&#x542B; es6-shim &#x4EE5;&#x63D0;&#x4F9B; Promise &#x652F;&#x6301;, &#x4F46; TypeScript &#x8FD8;&#x9700;&#x8981;&#x5B83;&#x7684;&#x7C7B;&#x578B;&#x6587;&#x4EF6;&#x3002;
&#x5728; PackageInstaller &#x4E2D;, &#x9009;&#x62E9; Typing &#x66FF;&#x6362; npm &#x9009;&#x9879;&#x3002;&#x63A5;&#x7740;&#x952E;&#x5165; &quot;es6-shim&quot;&#xFF1A;</p>
<p><img src="../../assets/images/tutorials/aspnet/packageinstaller-es6-shim.png" alt="Use PackageInstaller to install es6-shim typings"></p>
</li>
</ol>
<h2 id="&#x66F4;&#x65B0;-tsconfigjson">&#x66F4;&#x65B0; tsconfig.json</h2>
<p>&#x73B0;&#x5728;&#x5B89;&#x88C5;&#x597D;&#x4E86; Angular 2 &#x53CA;&#x5176;&#x4F9D;&#x8D56;&#x9879;&#xFF0C; &#x6211;&#x4EEC;&#x8FD8;&#x9700;&#x8981;&#x542F;&#x7528; TypeScript &#x4E2D;&#x5B9E;&#x9A8C;&#x6027;&#x7684;&#x88C5;&#x9970;&#x5668;&#x652F;&#x6301;&#x5E76;&#x4E14;&#x5F15;&#x5165; es6-shim &#x7684;&#x7C7B;&#x578B;&#x6587;&#x4EF6;&#x3002;
&#x5C06;&#x6765;&#x7684;&#x7248;&#x672C;&#x4E2D;&#xFF0C;&#x88C5;&#x9970;&#x5668;&#x548C; ES6 &#x9009;&#x9879;&#x5C06;&#x6210;&#x4E3A;&#x9ED8;&#x8BA4;&#x9009;&#x9879;&#xFF0C;&#x6211;&#x4EEC;&#x5C31;&#x53EF;&#x4EE5;&#x4E0D;&#x505A;&#x6B64;&#x8BBE;&#x7F6E;&#x4E86;&#x3002;
&#x6DFB;&#x52A0;<code>&quot;experimentalDecorators&quot;: true, &quot;emitDecoratorMetadata&quot;: true</code>&#x9009;&#x9879;&#x5230;<code>&quot;compilerOptions&quot;</code>&#xFF0C;&#x518D;&#x6DFB;&#x52A0;<code>&quot;./typings/index.d.ts&quot;</code>&#x5230;<code>&quot;files&quot;</code>&#x3002;
&#x6700;&#x540E;&#xFF0C;&#x6211;&#x4EEC;&#x8981;&#x65B0;&#x5EFA;<code>&quot;./src/model.ts&quot;</code>&#x6587;&#x4EF6;&#xFF0C;&#x5E76;&#x4E14;&#x5F97;&#x628A;&#x5B83;&#x52A0;&#x5230;<code>&quot;files&quot;</code>&#x91CC;&#x3002;
&#x73B0;&#x5728;<code>tsconfig.json</code>&#x5E94;&#x8BE5;&#x662F;&#x8FD9;&#x6837;&#xFF1A;</p>
<pre><code class="lang-json">{
  <span class="hljs-string">&quot;compilerOptions&quot;</span>: {
    <span class="hljs-string">&quot;noImplicitAny&quot;</span>: <span class="hljs-literal">false</span>,
    <span class="hljs-string">&quot;noEmitOnError&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;sourceMap&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;target&quot;</span>: <span class="hljs-string">&quot;es5&quot;</span>,
    <span class="hljs-string">&quot;experimentalDecorators&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;emitDecoratorMetadata&quot;</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-string">&quot;outDir&quot;</span>: <span class="hljs-string">&quot;./Scripts/App&quot;</span>
  },
  <span class="hljs-string">&quot;files&quot;</span>: [
    <span class="hljs-string">&quot;./src/app.ts&quot;</span>,
    <span class="hljs-string">&quot;./src/model.ts&quot;</span>,
    <span class="hljs-string">&quot;./src/main.ts&quot;</span>,
    <span class="hljs-string">&quot;./typings/index.d.ts&quot;</span>
  ]
}
</code></pre>
<h2 id="&#x6DFB;&#x52A0;-copyfiles-&#x5230;-build-&#x4E2D;">&#x6DFB;&#x52A0; CopyFiles &#x5230; build &#x4E2D;</h2>
<p>&#x6700;&#x540E;&#xFF0C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x786E;&#x4FDD; Angular &#x6587;&#x4EF6;&#x4F5C;&#x4E3A; build &#x7684;&#x4E00;&#x90E8;&#x5206;&#x590D;&#x5236;&#x8FDB;&#x6765;&#x3002;&#x8FD9;&#x6837;&#x64CD;&#x4F5C;&#xFF0C;&#x53F3;&#x51FB;&#x9879;&#x76EE;&#x9009;&#x62E9; &apos;Unload&apos; &#xFF0C;&#x518D;&#x6B21;&#x53F3;&#x51FB;&#x9879;&#x76EE;&#x9009;&#x62E9;
 &apos;Edit csproj&apos;&#x3002;
&#x5728; TypeScript &#x914D;&#x7F6E;&#x9879; PropertyGroup &#x4E4B;&#x540E;&#xFF0C;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A; ItemGroup &#x548C; Target &#x914D;&#x7F6E;&#x9879;&#x6765;&#x590D;&#x5236; Angular &#x6587;&#x4EF6;&#x3002;</p>
<pre><code class="lang-xml"><span class="hljs-tag">&lt;<span class="hljs-name">ItemGroup</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">NodeLib</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">&quot;$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2.js&quot;</span>/&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">NodeLib</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">&quot;$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2-polyfills.js&quot;</span>/&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">NodeLib</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">&quot;$(MSBuildProjectDirectory)\node_modules\systemjs\dist\system.src.js&quot;</span>/&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">NodeLib</span> <span class="hljs-attr">Include</span>=<span class="hljs-string">&quot;$(MSBuildProjectDirectory)\node_modules\rxjs\bundles\Rx.js&quot;</span>/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">ItemGroup</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">Target</span> <span class="hljs-attr">Name</span>=<span class="hljs-string">&quot;CopyFiles&quot;</span> <span class="hljs-attr">BeforeTargets</span>=<span class="hljs-string">&quot;Build&quot;</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">Copy</span> <span class="hljs-attr">SourceFiles</span>=<span class="hljs-string">&quot;@(NodeLib)&quot;</span> <span class="hljs-attr">DestinationFolder</span>=<span class="hljs-string">&quot;$(MSBuildProjectDirectory)\Scripts&quot;</span>/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">Target</span>&gt;</span>
</code></pre>
<p>&#x73B0;&#x5728;&#xFF0C;&#x5728;&#x5DE5;&#x7A0B;&#x4E0A;&#x53F3;&#x51FB;&#x9009;&#x62E9;&#x91CD;&#x65B0;&#x52A0;&#x8F7D;&#x9879;&#x76EE;&#x3002;
&#x6B64;&#x65F6;&#x5E94;&#x5F53;&#x80FD;&#x5728;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x8D44;&#x6E90;&#x7BA1;&#x7406;&#x5668;&#xFF08;Solution Explorer&#xFF09;&#x4E2D;&#x770B;&#x5230;<code>node_modules</code>&#x3002;</p>
<h2 id="&#x7528;-typescript-&#x5199;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684;-angular-&#x5E94;&#x7528;">&#x7528; TypeScript &#x5199;&#x4E00;&#x4E2A;&#x7B80;&#x5355;&#x7684; Angular &#x5E94;&#x7528;</h2>
<p>&#x9996;&#x5148;&#xFF0C;&#x5C06; <code>app.ts</code> &#x6539;&#x6210;&#xFF1A;</p>
<pre><code class="lang-ts"><span class="hljs-keyword">import</span> {Component} from <span class="hljs-string">&quot;angular2/core&quot;</span>
<span class="hljs-keyword">import</span> {MyModel} from <span class="hljs-string">&quot;./model&quot;</span>

@Component({
    selector: <span class="hljs-string">`my-app`</span>,
    template: <span class="hljs-string">`&lt;div&gt;Hello from {{getCompiler()}}&lt;/div&gt;`</span>
})
<span class="hljs-keyword">class</span> MyApp {
    model = <span class="hljs-keyword">new</span> MyModel();
    getCompiler() {
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.model.compiler;
    }
}
</code></pre>
<p>&#x63A5;&#x7740;&#x5728; <code>src</code> &#x4E2D;&#x6DFB;&#x52A0; TypeScript &#x6587;&#x4EF6; <code>model.ts</code>:</p>
<pre><code class="lang-ts"><span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> MyModel {
    compiler = <span class="hljs-string">&quot;TypeScript&quot;</span>;
}
</code></pre>
<p>&#x518D;&#x5728; <code>src</code> &#x4E2D;&#x6DFB;&#x52A0; <code>main.ts</code>&#xFF1A;</p>
<pre><code class="lang-ts"><span class="hljs-keyword">import</span> {bootstrap} from <span class="hljs-string">&quot;angular2/platform/browser&quot;</span>;
<span class="hljs-keyword">import</span> {MyApp} from <span class="hljs-string">&quot;./app&quot;</span>;
bootstrap(MyApp);
</code></pre>
<p>&#x6700;&#x540E;&#xFF0C;&#x5C06; <code>Views/Home/Index.cshtml</code> &#x6539;&#x6210;&#xFF1A;</p>
<pre><code class="lang-html">@{
    ViewBag.Title = &quot;Home Page&quot;;
}
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;~/Scripts/angular2-polyfills.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;~/Scripts/system.src.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;~/Scripts/rx.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;~/Scripts/angular2.js&quot;</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
    System.config({
        packages: {
            <span class="hljs-string">&apos;/Scripts/App&apos;</span>: {
                format: <span class="hljs-string">&apos;cjs&apos;</span>,
                defaultExtension: <span class="hljs-string">&apos;js&apos;</span>
            }
        }
    });
    System.import(<span class="hljs-string">&apos;/Scripts/App/main&apos;</span>).then(<span class="hljs-literal">null</span>, <span class="hljs-built_in">console</span>.error.bind(<span class="hljs-built_in">console</span>));
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">my-app</span>&gt;</span>Loading...<span class="hljs-tag">&lt;/<span class="hljs-name">my-app</span>&gt;</span>
</code></pre>
<p>&#x8FD9;&#x91CC;&#x52A0;&#x8F7D;&#x4E86;&#x6B64;&#x5E94;&#x7528;&#x3002;
&#x8FD0;&#x884C; ASP.NET &#x5E94;&#x7528;&#xFF0C;&#x4F60;&#x5E94;&#x8BE5;&#x80FD;&#x770B;&#x5230;&#x4E00;&#x4E2A; div &#x663E;&#x793A; &quot;Loading...&quot; &#x7D27;&#x63A5;&#x7740;&#x66F4;&#x65B0;&#x6210;&#x663E;&#x793A; &quot;Hello from TypeScript&quot;&#x3002;</p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="ASP.NET Core.html" class="navigation navigation-prev " aria-label="Previous page: ASP.NET Core">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Gulp.html" class="navigation navigation-next " aria-label="Next page: Gulp">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"ASP.NET 4","level":"1.2.3","depth":2,"next":{"title":"Gulp","level":"1.2.4","depth":2,"path":"doc/handbook/tutorials/Gulp.md","ref":"./doc/handbook/tutorials/Gulp.md","articles":[]},"previous":{"title":"ASP.NET Core","level":"1.2.2","depth":2,"path":"doc/handbook/tutorials/ASP.NET Core.md","ref":"./doc/handbook/tutorials/ASP.NET Core.md","articles":[]},"dir":"ltr"},"config":{"plugins":[],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"highlight":{},"search":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","author":"Patrick Zhong","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"preface.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"TypeScript Handbook","language":"zh-hans","gitbook":">3.0.0","description":"Translation of official TypeScript Handbook"},"file":{"path":"doc/handbook/tutorials/ASP.NET 4.md","mtime":"2018-10-13T09:48:54.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-10-13T09:57:42.904Z"},"basePath":"../../..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../../../gitbook/gitbook.js"></script>
    <script src="../../../gitbook/theme.js"></script>
    
        
        <script src="../../../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../../../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../../../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../../../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    
        
        <script src="../../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

